<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我要咨询</title>
    <script src="../../../js/header.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="../../../css/main.css">-->
    <style>
        html,body,body>div{
            overflow: hidden;
        }
        #unitEntrance{
            margin: 0;
            padding: 0;
        }
        .tab-title{
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left:10px;
            margin-bottom: 20px;
        }
        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }
    </style>
</head>
<body>
<div id="firstpage" style="overflow: hidden;">
    <el-row type="flex" justify="center" style="margin-top: 25px;">
        <el-col :span="15">
            <el-row :gutter="20">
                <el-col >
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px;margin-bottom: 20px;">
                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackmain()">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackzixun">公众交流</el-breadcrumb-item>
                        <span v-if="Title =='zixun'">
                            <el-breadcrumb-item>我要咨询</el-breadcrumb-item>
                            </span>
                        <apsn v-if="Title=='fankui'">
                            <el-breadcrumb-item>反馈查询</el-breadcrumb-item>
                        </apsn>
                    </el-breadcrumb>
                    <div class="search-tab">
                        <el-tabs v-model="Title" >
                            <el-tab-pane label="我要咨询" name="zixun" >
                                <el-form :model="Detail" :rules="rules" ref="Detail" label-width="140px" class="form_date_width" style="margin-top: 20px">
                                <el-row>
                                    <el-col :span="9">
                                        <el-form-item label="姓名:"  prop="flowName" label-width="130px" :rules="rules.flowName">
                                            <el-input v-model="Detail.flowName"  placeholder="" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="9">
                                        <el-form-item label="联系电话:" prop="flowPhone" label-width="130px" :rules="rules.flowPhone">
                                            <el-input v-model="Detail.flowPhone"  placeholder="" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="14">
                                        <el-form-item label="通讯地址:" v-model="flowAddress" prop="flowAddress"
                                                      label-width="130px">
                                            <el-select v-model="provinceValue" placeholder="请选择省" @change="chooseProvince"
                                                       style="width: 130px;">
                                                <el-option
                                                        v-for="item in provinceData"
                                                        :key="item.code"
                                                        :label="item.name"
                                                        :value="item.name">
                                                </el-option>
                                            </el-select>
                                            <span style="color: #C0CCDA;;">—</span>
                                            <el-select v-model="cityValue" placeholder="请选择市" @change="chooseCity"
                                                       style="width: 130px;">
                                                <el-option
                                                        v-for="item in cityData"
                                                        :key="item.code"
                                                        :label="item.name"
                                                        :value="item.name">
                                                </el-option>
                                            </el-select>
                                            <span style="color: #C0CCDA;;">—</span>
                                            <el-select v-model="areaValue" @change="editchooseArea" placeholder="请选择区、县"
                                                       style="width: 130px;">
                                                <el-option
                                                        v-for="item in areaData"
                                                        :key="item.code"
                                                        :label="item.name"
                                                        :value="item.name">
                                                </el-option>
                                            </el-select>
                                            <!--  <el-input v-model="Detail.xiangxiarea"  placeholder=""  style="width: 150px;"></el-input>-->
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="22">
                                        <el-form-item label="咨询/建议内容:"  prop="flowSuggest" label-width="130px" :rules="rules.flowSuggest">
                                            <el-input
                                                    type="textarea"
                                                    :disabled="formDisabled"
                                                    :autosize="{ minRows: 8, maxRows: 8}"
                                                    placeholder=""
                                                    maxlength="500"
                                                    show-word-limit
                                                    v-model="Detail.flowSuggest">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="22">
                                        <el-form-item label="附件上传:" prop="" label-width="130px">
                                            <iframe width="100%"  style="height: 200px;border: none;"   :src="link" :disabled="formDisabled"></iframe>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="22">
                                        <div style="float:right;">
                                            <el-button type="success" size="small" style="width: 60px;height: 30px;" @click="fabu('Detail')">提交</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="反馈查询" name="fankui" >
                                <el-form :model="selectForm" :rules="rules" ref="selectForm" label-width="150px" style="margin-top: 20px;">
                                    <el-row>
                                        <el-col :span="16">
                                            <el-form-item label="咨询/建议内容:" prop="" label-width="110px">
                                                <el-input v-model="selectForm.flowSuggest" placeholder=""></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <div style="float: right;">
                                            <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="searchForm()">查询</el-button>
                                            <el-button type="warning" size="small" style="width: 60px;height: 30px;" @click="resetForm()">重置</el-button>
                                        </div>
                                    </el-row>
                                </el-form>
                                <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                                    <el-table-column type="selection" ></el-table-column>
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            width="70"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createUser"
                                            label="创建人"
                                            width="90"
                                            align="center" >
                                    </el-table-column>
                                    <el-table-column  :show-overflow-tooltip="true"
                                                      prop="flowSuggest"
                                                      label="咨询/建议内容"
                                                      width="150"
                                                      align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="leaveTime"
                                            label="留言时间"
                                            width="110"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="statte"
                                            label="处理状态"
                                            width="90"
                                            align="center">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.statte==0">待接收</span>
                                            <span v-if="scope.row.statte==1">已处理</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column  :show-overflow-tooltip="true"
                                                      prop="feedbackDetail"
                                                      label="反馈详情"
                                                      width="150"
                                                      align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="feedbackTime"
                                            label="反馈时间"
                                            width="110"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column label="操作" align="center" width="">
                                        <template slot-scope="scope" fixed="right">
                                            <el-button class="look" size="mini" @click="checkContent(scope.$index,scope.row)">查看</el-button>
                                            <sapn v-if="loginname !=''">
                                                <el-button class="look" size="mini" @click="edit(scope.$index,scope.row)">修改</el-button>
                                                <el-button class="look" size="mini" @click="del(scope.$index,scope.row)">删除</el-button>
                                            </sapn>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div style="overflow: hidden;" justify="center">
                                    <div class="pagination">
                                        <el-pagination
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                :current-page="currentPage"
                                                :page-sizes="[10, 20, 30, 40]"
                                                :page-size="pagesize"
                                                background
                                                layout="total, sizes,prev, pager, next"
                                                :total="tableTotal"
                                                prev-text="上一页"
                                                next-text="下一页">
                                        </el-pagination>
                                    </div>
                                </div>
                                <el-dialog title="" :visible.sync="dialogForm" center fullscreen >
                                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left:300px;margin-top: 20px;margin-bottom: 20px;">
                                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackmain()">首页</el-breadcrumb-item>
                                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackzixun()">公众交流</el-breadcrumb-item>
                                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackfankui1()">反馈查询</el-breadcrumb-item>
                                        <el-breadcrumb-item>反馈信息详情</el-breadcrumb-item>
                                    </el-breadcrumb>
                                    <el-row type="flex" justify="center" style="margin-top: 25px;">
                                       <el-col :span="15">
                                        <el-form :model="Detail" :rules="rules1" ref="Detail" >
                                            <el-row>
                                                <el-col :span="8" class="tab-title">
                                                    反馈信息详情
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-form-item label="姓名:"  prop="flowName" label-width="130px" >
                                                        <el-input v-model="Detail.flowName"  placeholder="" disabled></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-form-item label="联系电话:" prop="flowPhone" label-width="130px" >
                                                        <el-input v-model="Detail.flowPhone"  placeholder="" disabled></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="22">
                                                    <el-form-item label="通讯地址:" v-model="flowAddress" prop="flowAddress"
                                                                  label-width="130px">
                                                        <el-select v-model="provinceValue" placeholder="请选择省" @change="chooseProvince"
                                                                   style="width: 110px;">
                                                            <el-option
                                                                    v-for="item in provinceData"
                                                                    :key="item.code"
                                                                    :label="item.name"
                                                                    :value="item.name"
                                                                    disabled>
                                                            </el-option>
                                                        </el-select>
                                                        <span style="color: #C0CCDA;;">—</span>
                                                        <el-select v-model="cityValue" placeholder="请选择市" @change="chooseCity"
                                                                   style="width: 110px;">
                                                            <el-option
                                                                    v-for="item in cityData"
                                                                    :key="item.code"
                                                                    :label="item.name"
                                                                    :value="item.name"
                                                                    disabled>
                                                            </el-option>
                                                        </el-select>
                                                        <span style="color: #C0CCDA;;">—</span>
                                                        <el-select v-model="areaValue" @change="editchooseArea" placeholder="请选择区、县"
                                                                   style="width: 110px;">
                                                            <el-option
                                                                    v-for="item in areaData"
                                                                    :key="item.code"
                                                                    :label="item.name"
                                                                    :value="item.name"
                                                                    disabled>
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="咨询/建议内容:"  prop="flowSuggest" label-width="130px" >
                                                        <el-input
                                                                type="textarea"
                                                                disabled
                                                                :autosize="{ minRows: 8, maxRows: 8}"
                                                                placeholder=""
                                                                maxlength="500"
                                                                show-word-limit
                                                                v-model="Detail.flowSuggest">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="反馈详情:"  prop="feedbackDetail" label-width="130px" :rules="rules1.feedbackDetail">
                                                        <el-input
                                                                type="textarea"
                                                                :disabled="formDisabled"
                                                                :autosize="{ minRows: 8, maxRows: 8}"
                                                                placeholder=""
                                                                maxlength="500"
                                                                show-word-limit
                                                                v-model="Detail.feedbackDetail">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="附件:" prop="" label-width="130px">
                                                        <iframe width="100%"  style="height: 200px;border: none;"   :src="link"></iframe>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <div style="float:right;">
                                                              <span v-if="formDisabled == false">
                                                               <el-button type="info" size="small" style="width: 60px;height: 30px;" @click="save('Detail')">提交</el-button>
                                                                </span>
                                                        <el-button type="info" size="small" style="width: 60px;height: 30px;" @click="dialogForm = false; clearDetail()">关闭</el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                       </el-col>
                                    </el-row>
                                </el-dialog>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

</div>
</body>
<script>
    var firstpage = new Vue({
        el: '#firstpage',
        data() {
            return {
                Title:'zixun',
                uuid:'',
                link:'',
                loginname:'',
                provinceValue:'',
                cityValue: '',
                areaValue: '',
                provinceData: [],
                cityData: [],
                areaData: [],
                dialogForm: false,//查看联合监管任务详情
                currentPage: 1, //默认显示页面为1
                pagesize: 10, // 每页的数据条数
                tableTotal:'',
                Detail: {
                    Id : '',
                    flowPhone : '',
                    flowName : '',
                    flowSuggest : '',
                    feedbackDetail:'',
                    leaveTime:'',
                    flowAddress:''
                },
                rules: {
                    flowPhone: [{
                        required : true,
                        message : '请输入电话',
                        trigger : 'blur'
                    }],
                    flowName: [{
                        required : true,
                        message : '请输入姓名',
                        trigger : 'blur'
                    }],
                    flowSuggest:[{
                        required : true,
                        message : '请输入咨询或建议内容',
                        trigger : 'blur'
                    }],
                    flowAddress:[{
                        requires :true,
                        message :'必填',
                        trigger :'请输入地址'
                    }]
                },
                rules1: {
                    feedbackDetail: [{
                        required : true,
                        message : '请输入反馈内容',
                        trigger : 'blur'
                    }]
                },
                selectForm: {
                    flowSuggest:''
                },
                formDisabled: false,
                provinceData: [],
                address:[],
                currentRow: null,
                formDisabled: false,
                tableData: [],
                showOnSubmit: true,
                showOnReplace: false
            }
        },
        mounted(){
            this.getUuid();
            this.getData();
            this.created();
        },
        methods: {
            getData() {
                axios({
                    method: 'get',
                    url: '/dzjportal/interflow/list',
                    params: {
                        pageSize: this.pagesize,
                        pageNo: this.currentPage
                    }
                })
                    .then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    console.log(data.data.results)
                    let dataInformation = data.data.results;
                    this.tableTotal = data.data.total;// 数据长度
                    this.tableData = dataInformation;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            /* 列表页搜索 */
            searchForm() {
                axios({
                    method: 'get',
                    url: '/dzjportal/interflow/gzjlList',
                    params: {
                        pageSize: this.pagesize,
                        pageNo: this.currentPage,
                        flowSuggest:this.selectForm.flowSuggest
                    }
                })
                    .then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    let dataInformation = data.data.results;
                    this.tableTotal = data.data.total;// 数据长度
                    this.tableData = dataInformation;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            // 查看
            checkContent(index,row){
                debugger;
                this.uuid=row.id;
                this.link = "../../upload/annex1.html?uuid=" + this.uuid + "&flag=0";
                this.dialogForm = true;
                this.showInformation(index,row);
                this.checkDisabled(true);
            },
            // 修改
            edit(index,row){
                this.uuid=row.id;
                this.link="../../upload/annex1.html?uuid="+this.uuid+"&flag=0";
                this.dialogForm = true;
                this.showInformation(index,row);
                this.checkDisabled(false);
            },
            // 删除
            del(index, row) {
                this.$confirm('确定要删除吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    axios({
                              method: 'post',
                              url: '/dzjportal/interflow/delete',
                              params : {
                                  id : row.id,
            }
            })
            .then(response => {
                    let data = response.data;
                console.log(response);
                if (data.code == 200) {
                    // 确认删除
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.resetForm();
                    this.getData();
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });
            },
            created() {
                axios.get('../../../json/ChinaCity.json').then(res => {
                    this.provinceData = res.data;
            }).catch(e => {
                    this.$message.error("网络连接超时");
            });
                var  userInfo = JSON.parse(localStorage.getItem("userInfo"));
                this.loginname= userInfo.loginName;
                let date = new Date();
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                console.log(y + '-' + MM + '-' + d);
                this.Detail.leaveTime = y + '-' + MM + '-' + d;
            },
            fabu(Detail) {
                this.$refs.Detail.validate((valid) => {
                    this.Detail.id = this.uuid;
                if (valid) {
                    axios({
                        method: 'post',
                        url: '/dzjportal/interflow/save',
                        data: this.Detail
                    })
                        .then((response) => {
                        let data = response.data;
                    if (data.code == 200) {
                        this.clearDetail();
                        this.gobackfankui();
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });

                    } else {
                        this.$message.error(data.msg);
                    }
                })
                    ;
                }
            })
            },
            // 表单修改提交
            save(Detail) {
                debugger;
                this.$refs.Detail.validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            url: '/dzjportal/interflow/update',
                            data: this.Detail
                        })
                            .then((response) => {
                            let data = response.data;
                        if (data.code == 200) {
                            debugger;
                            this.dialogForm = false;
                            this.clearDetail();
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.resetForm();
                            this.getData();
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                    }
                })

            },
            gobackmain(){
                parent.vue.backIndex();
            },
            gobackzixun(){
                this.Title='zixun';
                this.clearDetail();
            },
            gobackfankui(){
                this.Title='fankui';
                this.getData();
            },
            gobackfankui1(){
                this.dialogForm = false
                this.Title='fankui';
                this.clearDetail();
                this.getData();
            },
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: '/dzjportal/uuid/getUuid',
                })
                    .then(response => {
                    if(response.data.code == 200
            )
                {
                    debugger;
                    this.uuid = response.data.data;
                    this.link = "../../upload/annex1.html?uuid=" + this.uuid + "&flag=1";
                }
            else
                {
                    this.$message.error(response.data.msg);
                }
            })
            .
                catch(function (error) {
                    console.log(error);
                });
            },
            clearDetail() {
                this.Detail.Id = '',
                    this.Detail.flowPhone = '',
                    this.Detail.flowName = '',
                    this.Detail.flowSuggest = '',
                    this.Detail.feedbackDetail = '',
                    this.Detail.flowAddress = ''
            },
            // 设置允许填写和不允许填写
            checkDisabled(n) {
                if (n) {
                    this.formDisabled = true;
                } else {
                    this.formDisabled = false;
                }
            },
            // 地区三级联动数据选择
            chooseProvince(value) {
                this.cityValue = '';
                this.areaValue = '';
                this.cityData = [];
                this.areaData = [];
                this.provinceData.map(e => {//遍历数据
                    if(value == e.name
            )
                {
                    this.cityData = e.cityList;
                    return;
                }
            })
                console.log(value)
                this.newprovinceValue = value;
            },
            chooseCity(value) {
                this.areaValue = '';
                this.cityData.map(e => {//遍历数据
                    if(value == e.name
            )
                {
                    this.areaData = e.areaList;
                    return;
                }
            })
                console.log(value)
                this.cityValue = value;
            },
            chooseArea(value) {
                console.log(value)
                this.areaValue = value;
                this.newcommonproject.proAddress = this.provinceValue + "-" + this.cityValue + "-" + this.areaValue;
                console.log(this.newcommonproject.proAddress)
            },
            editchooseArea(value) {
                console.log(value)
                this.areaValue = value;
                this.Detail.flowAddress = this.provinceValue + "-" + this.cityValue + "-" + this.areaValue;
            },
            /* 列表页重置 */
            resetForm() {
                this.selectForm.currentPage = 1; //默认显示页面为1
                this.selectForm.pagesize = 10; // 每页的数据条数
                this.selectForm.flowSuggest='',
                    this.getData();
            },
            /* 单选搜索表单 */
            selectCurrentChange(val){
                this.currentRow = val;
            },
            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.getData();
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            },
            // 公共方法--查看
            showInformation(index,row){
                axios({
                    method: 'get',
                    url: '/dzjportal/interflow/info',
                    params:{
                        id: row.id
                    }
                })
                    .then(response => {
                    console.log(response.data);
                if (response.data.code == 200) {
                    debugger;
                    this.Detail = response.data.data;
                    if (this.Detail.flowAddress != ""){
                        this.address = this.Detail.flowAddress.split("-");
                        this.provinceValue = this.address[0];
                        this.cityValue = this.address[1];
                        this.areaValue = this.address[2];
                    }

                } else {
                    this.$message.error(data.msg);
                }
            }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</html>